<div class="nav-tabs-custom tab-success one-min-height">
  <ul class="nav nav-tabs">
    <li id="singleli" class="active"><a href="#tab_1" data-toggle="tab">单一实例</a></li>
    <li id="groupli" class=""><a href="#tab_2" data-toggle="tab">组合实例</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab_1">

      <div class="row">
        <div class="col-sm-8 col-sm-push-2">

          <form class="form form-horizontal" [formGroup]="instancesForm">

            <div class="form-group">
              <label for="instance_add_instanceName" class="col-sm-4 col-md-3 col-lg-2 control-label">实例名称:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="实例名称" id="instance_add_instanceName" required formControlName="alarmName">
                <div *ngIf="formErrors.alarmName" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.alarmName}} </label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="instance_add_code" class="col-sm-4 col-md-3 col-lg-2 control-label">实例编码:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="实例编码" id="instance_add_code"
                       required formControlName="code">
                <div *ngIf="formErrors.code" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.code}} </label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="instance_add_type" class="col-sm-4 col-md-3 col-lg-2 control-label">报警类型:</label>
              <div class="col-sm-8">
                <select class="multiselect form-control" id="instance_add_type" formControlName="type"
                        style="max-width: 100%;">
                  <option value="1">标准站</option>
                  <option value="2">微型站</option>
                  <option value="3">工业废气</option>
                  <option value="4">扬尘</option>
                  <option value="5">油烟</option>
                  <option value="6">油漆房</option>
                  <option value="7">加油站</option>
                  <option value="8">工业废水</option>
                  <option value="9">水质断层</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label for="instance_add_receiverName" class="col-sm-4 col-md-3 col-lg-2 control-label">发送对象:</label>
              <div class="col-sm-8">
                <input type="hidden" class="form-control" id="instance_add_receiver"
                       formControlName="receiver">
                <input type="text" class="form-control" placeholder="双击鼠标选择发送对象" id="instance_add_receiverName"
                       formControlName="receiverName" (dblclick)="getReceiver()" readonly>
                <div *ngIf="formErrors.receiverName" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.receiverName}} </label>
                </div>
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 col-md-3 col-lg-2 control-label">报警等级:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-3">
                    <input type="radio" id="instance_add_level_blue" value="1" checked
                           formControlName="level">
                    <label for="instance_add_level_blue">
                      蓝色
                    </label>
                  </div>
                  <div class="col-xs-3">
                    <input type="radio" id="instance_add_level_yellow" value="2" formControlName="level">
                    <label for="instance_add_level_yellow">
                      黄色
                    </label>
                  </div>
                  <div class="col-xs-3">
                    <input type="radio" id="instance_add_level_orange" value="3" formControlName="level">
                    <label for="instance_add_level_orange">
                      橙色
                    </label>
                  </div>
                  <div class="col-xs-3">
                    <input type="radio" id="instance_add_level_red" value="4" formControlName="level">
                    <label for="instance_add_level_red">
                      红色
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 col-md-3 col-lg-2 control-label">发送方式:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_sendMode_inApp" value="1" checked
                           formControlName="sendMode">
                    <label for="instance_add_sendMode_inApp">
                      应用内
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_sendMode_SMS" value="2"
                           formControlName="sendMode">
                    <label for="instance_add_sendMode_SMS">
                      短信
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_sendMode_email" value="3"
                           formControlName="sendMode">
                    <label for="instance_add_sendMode_email">
                      邮件
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 col-md-3 col-lg-2 control-label">实时发送:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_isReal_yes" value="1" checked
                           formControlName="isReal" (click)="yesClickFun($event)">
                    <label for="instance_add_isReal_yes">
                      是
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_isReal_no" value="0" formControlName="isReal"
                           (click)="noClickFun($event)">
                    <label for="instance_add_isReal_no">
                      否
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group" id="instance_add_startTime_div" style="display: none;">
              <label for="instance_add_startTime" class="col-sm-4 col-md-3 col-lg-2 control-label">开始时间:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="开始时间" id="instance_add_startTime"
                       formControlName="startTime">
              </div>
            </div>

            <div class="form-group" id="instance_add_endTime_div" style="display: none;">
              <label for="instance_add_endTime" class="col-sm-4 col-md-3 col-lg-2 control-label">结束时间:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="结束时间" id="instance_add_endTime"
                       formControlName="endTime">
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 col-md-3 col-lg-2 control-label">是否有效:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_Use" value="1" formControlName="isUse">
                    <label for="instance_add_Use">
                      有效
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_inUse" value="0" checked
                           formControlName="isUse">
                    <label for="instance_add_inUse">
                      无效
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="template" class="col-sm-4 col-md-3 col-lg-2 control-label">报警模板:</label>
              <div class="col-sm-8">

                <select class="multiselect form-control" id="template" (change)="pushTemplateId(temp.value)" #temp
                        formControlName="template" style="max-width: 100%;">
                  <option value="" selected> -------请选择模板------</option>
                  <option *ngFor="let template of templates" [value]="template.note"
                  >{{template.msgName}}
                  </option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label for="content" class="col-sm-4 col-md-3 col-lg-2 control-label">报警模板内容:</label>
              <div class="col-sm-8">
                <textarea id="content" rows="5" formControlName="content" [(ngModel)]="instances.content"></textarea>
              </div>
            </div>

            <div class="form-group" formArrayName="ruleList" style="padding: 0 15px">
              <div class="row">
                <h4 class="col-sm-4 col-md-3 col-lg-2 control-label">添加规则:</h4>
              </div>
              <div *ngFor="let alarmRule of ruleList.controls; let i=index" [formGroupName]="i">
                <!-- The repeated address template -->
                <div>
                  <div class="form-group">
                    <label [for]="'orderNumber'+i" class="col-sm-4 col-md-3 col-lg-2 control-label">执行序号:</label>
                    <div class="col-sm-8">
                      <input class="form-control" [id]="'orderNumber'+i" formControlName="orderNumber"/>
                      <div *ngIf="formErrors.orderNumber" class="has-error">
                        <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.orderNumber}}
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label [for]="'rule'+i" class="col-sm-4 col-md-3 col-lg-2 control-label">规则名称:</label>
                    <div class="col-sm-8">
                      <select class="multiselect form-control" [id]="'rule'+i" (change)="pushRule(i,rule.value)" #rule
                              formControlName="ruleName" style="max-width: 100%;">
                        <option value=""> -------请选择规则------</option>
                        <option *ngFor="let ruleName of getRuleNames()" [value]="ruleName">
                          {{ruleName}}
                        </option>
                      </select>
                      <div *ngIf="formErrors.ruleName" class="has-error">
                        <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.ruleName}}
                        </label>
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label [for]="'ruleOperation'+i" class="col-sm-4 col-md-3 col-lg-2 control-label">操作:</label>
                    <div class="col-sm-8">
                      <select class="multiselect form-control" [id]="'ruleOperation'+i" formControlName="ruleOperation" style="max-width: 100%;">
                        <option value=""></option>
                        <option *ngFor="let oper of getRuleOpers(i)" [value]="oper">
                          {{oper}}
                        </option>
                      </select>
                      <div *ngIf="formErrors.ruleOperation" class="has-error">
                        <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.ruleOperation}}
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label [for]="'ruleValue'+i" class="col-sm-4 col-md-3 col-lg-2 control-label">比较值:</label>
                    <div class="col-sm-8">
                      <select class="multiselect form-control" [id]="'ruleValue'+i" formControlName="ruleValue"
                              style="max-width: 100%;">
                        <option value=""></option>
                        <option *ngFor="let val of getRuleVals(i)" [value]="val">
                          {{val}}
                        </option>
                      </select>
                      <div *ngIf="formErrors.ruleValue" class="has-error">
                        <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.ruleValue}}
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label [for]="" class="col-sm-4 col-md-3 col-lg-2 control-label">成功后执行:</label>
                    <div class="col-sm-8">
                      <input class="form-control" id="successNext" formControlName="successNext">
                      <div *ngIf="formErrors.successNext" class="has-error">
                        <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.successNext}}
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label [for]="'failNext'+i" class="col-sm-4 col-md-3 col-lg-2 control-label">失败后执行:</label>
                    <div class="col-sm-8">
                      <input class="form-control" [id]="'failNext'+i" formControlName="failNext">
                      <div *ngIf="formErrors.failNext" class="has-error">
                        <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.failNext}}
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-4 col-md-3 col-lg-2 control-label">
                    <button class="btn btn-success" (click)="remove(i)" style="margin-bottom: 10px;">删除规则</button>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4 col-md-3 col-lg-2 control-label">
                  <button class="btn btn-success" (click)="addAlarmRule()" type="button">添加规则</button>
                </div>
              </div>

            </div>

          </form>
          <div class="one-form-footer">
            <div class="row">
              <div class="col-lg-10 col-md-11">
                <div class="pull-right">
                  <button class="btn btn-default" type="button" (click)="goCategory()">上一步</button>
                  <button class="btn btn-default" type="button" (click)="cancelInstanceAdd()">取消</button>
                  <button class="btn btn-success" type="button" [disabled]="instancesForm.invalid || submitted"  (click)="onSubmit()">
                    提交
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="tab-pane" id="tab_2">
      <div class="row">
        <div class="col-sm-8 col-sm-push-2">
          <form class="form form-horizontal" [formGroup]="instancesGroupForm">

            <div class="form-group">
              <label for="instance_add_group_instanceName" class="col-sm-4 col-md-3 col-lg-2 control-label">实例名称:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="实例名称" id="instance_add_group_instanceName"
                       required formControlName="alarmName">
                <div *ngIf="groupFormErrors.alarmName" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{groupFormErrors.alarmName}}
                  </label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="instance_add_group_code" class="col-sm-4 col-md-3 col-lg-2 control-label">实例编码:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="实例编码" id="instance_add_group_code"
                       required formControlName="code">
                <div *ngIf="groupFormErrors.code" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{groupFormErrors.code}} </label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="instance_add_group_type" class="col-sm-4 col-lg-2 col-md-3 control-label">报警类型:</label>
              <div class="col-sm-8">
                <select class="multiselect form-control" id="instance_add_group_type" formControlName="type"
                        style="max-width: 100%;">
                  <option value="1">标准站</option>
                  <option value="2">微型站</option>
                  <option value="3">工业废气</option>
                  <option value="4">扬尘</option>
                  <option value="5">油烟</option>
                  <option value="6">油漆房</option>
                  <option value="7">加油站</option>
                  <option value="8">工业废水</option>
                  <option value="9">水质断层</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label for="instance_add_group_receiverName" class="col-sm-4 col-lg-2 col-md-3 control-label">发送对象:</label>
              <div class="col-sm-8">
                <input type="hidden" class="form-control" id="instance_add_group_receiver"
                       formControlName="receiver">
                <input type="text" class="form-control" placeholder="鼠标双击选择发送对象" id="instance_add_group_receiverName"
                       formControlName="receiverName" (dblclick)="getGroupReceiver()">
                <div *ngIf="groupFormErrors.receiverName" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.receiverName}} </label>
                </div>
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 col-md-3 col-lg-2 control-label">报警等级:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-3">
                    <input type="radio" id="instance_add_group_level_blue" value="1" checked
                           formControlName="level">
                    <label for="instance_add_group_level_blue">
                      蓝色
                    </label>
                  </div>
                  <div class="col-xs-3">
                    <input type="radio" id="instance_add_group_level_yellow" value="2" formControlName="level">
                    <label for="instance_add_group_level_yellow">
                      黄色
                    </label>
                  </div>
                  <div class="col-xs-3">
                    <input type="radio" id="instance_add_group_level_orange" value="3" formControlName="level">
                    <label for="instance_add_group_level_orange">
                      橙色
                    </label>
                  </div>
                  <div class="col-xs-3">
                    <input type="radio" id="instance_add_group_level_red" value="4" formControlName="level">
                    <label for="instance_add_group_level_red">
                      红色
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 col-md-3 col-lg-2 control-label">发送方式:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_group_sendMode_inApp" value="1" checked
                           formControlName="sendMode">
                    <label for="instance_add_group_sendMode_inApp">
                      应用内
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_group_sendMode_SMS" value="2"
                           formControlName="sendMode">
                    <label for="instance_add_group_sendMode_SMS">
                      短信
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_group_sendMode_email" value="3"
                           formControlName="sendMode">
                    <label for="instance_add_group_sendMode_email">
                      邮件
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 col-md-3 col-lg-2 control-label">实时发送:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_group_isReal_yes" value="1" checked
                           formControlName="isReal" (click)="yesGroupClickFun($event)">
                    <label for="instance_add_group_isReal_yes">
                      是
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_group_isReal_no" value="0" formControlName="isReal"
                           (click)="noGroupClickFun($event)">
                    <label for="instance_add_group_isReal_no">
                      否
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group" id="instance_add_group_startTime_div" style="display: none;">
              <label for="instance_add_group_startTime" class="col-sm-4 col-md-3 col-lg-2 control-label">开始时间:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="开始时间" id="instance_add_group_startTime"
                       formControlName="startTime">
              </div>
            </div>

            <div class="form-group" id="instance_add_group_endTime_div" style="display: none;">
              <label for="instance_add_group_endTime" class="col-sm-4 col-md-3 col-lg-2 control-label">结束时间:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="结束时间" id="instance_add_group_endTime"
                       formControlName="endTime">
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 col-md-3 col-lg-2 control-label">是否有效:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_group_Use" value="1" formControlName="isUse">
                    <label for="instance_add_group_Use">
                      有效
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_add_group_inUse" value="0" checked
                           formControlName="isUse">
                    <label for="instance_add_group_inUse">
                      无效
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <!--搜索栏-->
            <form class="form-inline">
              <div class="form-group" style="margin: 0 10px 0 0;">
                <label for="instanceGroupName">实例名称：</label>
                <input type="text" class="form-control" id="instanceGroupName" placeholder="" value="" (keyup.enter)="search()">
              </div>
              <div class="form-group" style="margin: 0;">
                <label for="instanceGroupCode">实例编码：</label>
                <input type="text" class="form-control" id="instanceGroupCode" placeholder="" value="" (keyup.enter)="search()">
              </div>
              <button class="btn btn-success" type="button" (click)="search()">查询</button>
            </form>
            <!-- table栏 -->
            <div class="one-table-area">
              <table id="one_table_instances"></table>
            </div>
          </form>
          <div class="one-form-footer">
            <div class="pull-right">
              <button class="btn btn-default" type="button" (click)="goCategory()">上一步</button>
              <button class="btn btn-default" type="button" (click)="cancelInstanceAdd()">取消</button>
              <button class="btn btn-success" type="button" [disabled]="instancesGroupForm.invalid || groupSubmitted" (click)="onGroupSubmit()">
                提交
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
